page {
  background-color: #f5f5f5;
}

.actor {
  .header-btn {
    color: #fff;
    padding: 0 40rpx;
    height: 56rpx;
    line-height: 56rpx;
    border-radius: 100rpx;
    background-color: rgba(#fff, 0.25);

    &.is-focus {
      background-color: rgba(#f96a19, 0.3);
    }
  }

  .actor-info {
    position: relative;
    height: 460rpx;
    background-color: rgba(#f96a19, 0.85);
    transition: height .2s;

    .actor-avatar {
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center 20%;
    }

    .actor-avatar-larger {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }

    .actor-focus {
      position: absolute;
      right: 20rpx;
      bottom: 60rpx;
      color: #fff;
      padding: 0 40rpx;
      height: 56rpx;
      line-height: 56rpx;
      border-radius: 100rpx;
      background-color: rgba(#fff, 0.25);

      &.is-focus {
        background-color: rgba(#e54847, 0.3);
      }
    }

    .actor-info-footer {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      padding: 50rpx 200rpx 30rpx 20rpx;
      color: #fff;
      background-image: linear-gradient(transparent 0%,
          rgba(0, 0, 0, 0.4) 100%);

      .actor-name {
        font-size: 40rpx;
        line-height: 48rpx;
      }

      .actor-name_en {
        font-size: 24rpx;
        color: #f3f3f3;
        line-height: 48rpx;
      }

      .actor-extra {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #ddd;

        .delimiter {
          margin: 0 10rpx;
        }
      }
    }
  }

  .summary {
    white-space: normal;
    font-size: 28rpx;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-align: justify;

    &.no-data {
      height: 160rpx;
      line-height: 160rpx;
      text-align: center;
      color: var(--color-text-secondary);
      font-size: 24rpx;
    }
  }
}